<template>
  <div class="user-ranking-container">
    <div class="page-header">
      <h2>用户活跃度排行</h2>
      <div class="header-actions">
        <el-input
          v-model="searchKeyword"
          placeholder="搜索用户名"
          clearable
          style="width: 220px; margin-right: 16px"
          @clear="handleSearch"
          @keyup.enter="handleSearch"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
        <el-select
          v-model="topN"
          @change="handleTopNChange"
          style="width: 120px; margin-right: 16px"
        >
          <el-option :value="10" label="Top 10"></el-option>
          <el-option :value="20" label="Top 20"></el-option>
          <el-option :value="50" label="Top 50"></el-option>
          <el-option :value="100" label="Top 100"></el-option>
        </el-select>
        <el-dropdown split-button type="primary" @click="exportAsPDF" @command="handleExport" style="margin-right: 10px;">
          导出报表
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="pdf">导出为PDF</el-dropdown-item>
              <el-dropdown-item command="excel">导出为Excel</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-button type="primary" @click="refreshData" :loading="loading" icon="Refresh">刷新</el-button>
      </div>
    </div>

    <div class="ranking-content" v-loading="loading">
      <el-card>
        <!-- 排名表格 -->
        <el-table :data="userList" stripe style="width: 100%">
          <el-table-column type="index" label="排名" width="80" />
          <el-table-column prop="username" label="用户名" min-width="120" />
          <el-table-column prop="activityScore" label="活跃度" min-width="120">
            <template #default="scope">
              <div class="score-bar">
                <div class="score-value">{{ scope.row.activityScore }}</div>
                <el-progress 
                  :percentage="getScorePercentage(scope.row.activityScore)"
                  :color="getScoreColor(scope.row.activityScore)"
                  :format="() => ''"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="eventCount" label="参与活动数" min-width="120" />
          <el-table-column prop="ticketCount" label="购票数量" min-width="120" />
          <el-table-column prop="feedbackCount" label="反馈数量" min-width="120">
            <template #default="scope">
              {{ scope.row.surveyCount || 0 }}
            </template>
          </el-table-column>
          <el-table-column prop="lastLoginTime" label="最后活跃" min-width="180">
            <template #default="scope">
              {{ scope.row.lastActiveTime || '-' }}
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <!-- 用户详情对话框 -->
      <el-dialog v-model="userDetailVisible" title="用户活动详情" width="700px">
        <div v-if="selectedUser" class="user-detail-content" v-loading="loadingUserEvents">
          <div class="user-detail-header">
            <div class="user-avatar">{{ selectedUser.username.charAt(0).toUpperCase() }}</div>
            <div class="user-info">
              <h3>{{ selectedUser.username }}</h3>
              <p>用户ID: {{ selectedUser.userId }}</p>
              <p>邮箱: {{ selectedUser.email || '未设置' }}</p>
            </div>
          </div>

          <el-divider />

          <div class="user-stats">
            <el-row :gutter="20">
              <el-col :xs="12" :sm="8" :md="6">
                <div class="stat-item">
                  <div class="stat-label">活跃度</div>
                  <div class="stat-value primary">{{ selectedUser.activityScore }}</div>
                </div>
              </el-col>
              <el-col :xs="12" :sm="8" :md="6">
                <div class="stat-item">
                  <div class="stat-label">参与活动</div>
                  <div class="stat-value success">{{ selectedUser.eventCount }}</div>
                </div>
              </el-col>
              <el-col :xs="12" :sm="8" :md="6">
                <div class="stat-item">
                  <div class="stat-label">购票数量</div>
                  <div class="stat-value warning">{{ selectedUser.ticketCount }}</div>
                </div>
              </el-col>
              <el-col :xs="12" :sm="8" :md="6">
                <div class="stat-item">
                  <div class="stat-label">反馈数量</div>
                  <div class="stat-value info">{{ selectedUser.surveyCount || 0 }}</div>
                </div>
              </el-col>
            </el-row>
          </div>

          <el-divider />

          <h4>最近参与的活动</h4>
          <el-empty v-if="userEvents.length === 0" description="暂无参与活动记录"></el-empty>
          <el-table v-else :data="userEvents" stripe style="width: 100%">
            <el-table-column prop="eventName" label="活动名称" min-width="150">
              <template #default="scope">
                {{ scope.row.eventName || scope.row.title || '未命名活动' }}
              </template>
            </el-table-column>
            <el-table-column prop="participateTime" label="参与时间" min-width="150">
              <template #default="scope">
                {{ scope.row.participateTime || scope.row.joinTime || scope.row.createTime || '-' }}
              </template>
            </el-table-column>
            <el-table-column prop="ticketType" label="票种" min-width="100">
              <template #default="scope">
                {{ scope.row.ticketType || scope.row.ticketName || '-' }}
              </template>
            </el-table-column>
            <el-table-column prop="hasFeedback" label="是否反馈" min-width="100">
              <template #default="scope">
                <el-tag :type="scope.row.hasFeedback || scope.row.hasSurvey ? 'success' : 'info'">
                  {{ scope.row.hasFeedback || scope.row.hasSurvey ? '已反馈' : '未反馈' }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import { getActiveUsers, getUserEvents } from '@/api/report'
import html2pdf from 'html2pdf.js'
import * as XLSX from 'xlsx'
import jsPDF from 'jspdf'
import 'jspdf-autotable'
import html2canvas from 'html2canvas'

// 状态变量
const loading = ref(false)
const loadingUserEvents = ref(false)
const exporting = ref(false)
const userList = ref([])
const searchKeyword = ref('')
const topN = ref(10)

// 用户详情
const userDetailVisible = ref(false)
const selectedUser = ref(null)
const userEvents = ref([])

// 初始化
onMounted(() => {
  fetchRankingData()
})

// 获取用户排行数据
const fetchRankingData = async () => {
  loading.value = true
  try {
    const res = await getActiveUsers({ top: topN.value })
    if (res.code === 200 && res.data) {
      userList.value = res.data.filter(user => {
        if (!searchKeyword.value) return true
        return user.username.toLowerCase().includes(searchKeyword.value.toLowerCase())
      })
    } else {
      ElMessage.error(res.msg || '获取用户排行失败')
    }
  } catch (error) {
    console.error('获取用户排行出错:', error)
    ElMessage.error('获取用户排行失败')
  } finally {
    loading.value = false
  }
}

// 获取用户参与的活动
const fetchUserEvents = async (userId) => {
  loadingUserEvents.value = true
  userEvents.value = []
  
  try {
    const res = await getUserEvents(userId, { limit: 5 }) // 获取最近5条记录
    if (res.code === 200 && res.data) {
      userEvents.value = res.data
    } else {
      console.error('获取用户活动记录失败:', res.msg)
    }
  } catch (error) {
    console.error('获取用户活动记录出错:', error)
  } finally {
    loadingUserEvents.value = false
  }
}

// 刷新数据
const refreshData = () => {
  fetchRankingData()
}

// 搜索处理
const handleSearch = () => {
  fetchRankingData()
}

// Top N 变化处理
const handleTopNChange = () => {
  fetchRankingData()
}

// 查看用户详情
const viewUserDetail = (user) => {
  selectedUser.value = user
  userDetailVisible.value = true
  
  // 获取用户参与的活动
  if (user && user.userId) {
    fetchUserEvents(user.userId)
  }
}

// 计算活跃度百分比（用于进度条）
const getScorePercentage = (score) => {
  // 假设最高分是100
  const maxScore = 100
  return Math.min(100, (score / maxScore) * 100)
}

// 根据分数获取颜色
const getScoreColor = (score) => {
  if (score >= 80) return '#67C23A' // 绿色
  if (score >= 60) return '#E6A23C' // 黄色
  if (score >= 40) return '#F56C6C' // 红色
  return '#909399' // 灰色
}

// 导出处理
const handleExport = (command) => {
  if (command === 'pdf') {
    exportAsPDF()
  } else if (command === 'excel') {
    exportAsExcel()
  }
}

// 导出为PDF
const exportAsPDF = () => {
  if (exporting.value) return
  exporting.value = true
  
  ElMessage.info('正在生成PDF，请稍候...')
  
  // 复制元素以修改样式（不影响原页面）
  const element = document.createElement('div')
  element.className = 'pdf-export-container'
  element.style.backgroundColor = 'white'
  element.style.padding = '20px'
  element.style.width = '800px'
  element.style.fontFamily = "'SimSun', Arial, sans-serif"
  
  // 添加标题和头部信息
  element.innerHTML = `
    <div style="text-align: center; margin-bottom: 20px;">
      <h1 style="font-size: 24px; margin-bottom: 10px;">用户活跃度排行榜</h1>
      <p style="color: #666; font-size: 14px; text-align: right;">导出时间: ${new Date().toLocaleString()}</p>
      <hr style="border: 0; border-top: 1px solid #eee; margin: 20px 0;">
    </div>
  `
  
  // 添加用户排行表格 - 修复表格格式
  const tableContainer = document.createElement('div')
  
  // 表格标题
  let tableHTML = `
    <div style="margin-bottom: 20px;">
      <h2 style="font-size: 18px; margin-bottom: 10px; border-bottom: 1px solid #eee; padding-bottom: 5px;">
        用户排行榜 (Top ${topN.value})
      </h2>
      <table style="width: 100%; border-collapse: collapse; border: 1px solid #ddd; margin-top: 10px;">
        <thead>
          <tr style="background-color: #f5f7fa;">
            <th style="padding: 10px; border: 1px solid #ddd; text-align: center; width: 60px;">排名</th>
            <th style="padding: 10px; border: 1px solid #ddd; text-align: left; width: 120px;">用户名</th>
            <th style="padding: 10px; border: 1px solid #ddd; text-align: center; width: 80px;">活跃度</th>
            <th style="padding: 10px; border: 1px solid #ddd; text-align: center; width: 100px;">参与活动数</th>
            <th style="padding: 10px; border: 1px solid #ddd; text-align: center; width: 100px;">购票数量</th>
            <th style="padding: 10px; border: 1px solid #ddd; text-align: center; width: 150px;">最近活跃</th>
          </tr>
        </thead>
        <tbody>
  `
  
  // 逐行添加用户数据
  userList.value.forEach((user, index) => {
    tableHTML += `
      <tr style="background-color: ${index % 2 === 0 ? '#fff' : '#f9f9f9'}">
        <td style="padding: 8px; border: 1px solid #ddd; text-align: center;">${index + 1}</td>
        <td style="padding: 8px; border: 1px solid #ddd; text-align: left;">${user.username || '-'}</td>
        <td style="padding: 8px; border: 1px solid #ddd; text-align: center;">${user.activityScore || 0}</td>
        <td style="padding: 8px; border: 1px solid #ddd; text-align: center;">${user.eventCount || 0}</td>
        <td style="padding: 8px; border: 1px solid #ddd; text-align: center;">${user.ticketCount || 0}</td>
        <td style="padding: 8px; border: 1px solid #ddd; text-align: center;">${user.lastActiveTime || '-'}</td>
      </tr>
    `
  })
  
  // 如果没有数据，显示空行
  if (userList.value.length === 0) {
    tableHTML += `
      <tr>
        <td colspan="6" style="padding: 20px; text-align: center; color: #999;">暂无数据</td>
      </tr>
    `
  }
  
  tableHTML += `
        </tbody>
      </table>
    </div>
  `
  
  tableContainer.innerHTML = tableHTML
  element.appendChild(tableContainer)
  
  // 添加活跃度说明
  const infoContainer = document.createElement('div')
  infoContainer.innerHTML = `
    <div style="margin-bottom: 20px;">
      <h2 style="font-size: 18px; margin-bottom: 10px; border-bottom: 1px solid #eee; padding-bottom: 5px;">
        活跃度说明
      </h2>
      <table style="width: 100%; border-collapse: collapse; border: 1px solid #ddd; margin-top: 10px;">
        <thead>
          <tr style="background-color: #f5f7fa;">
            <th style="padding: 10px; border: 1px solid #ddd; text-align: center; width: 100px;">活跃等级</th>
            <th style="padding: 10px; border: 1px solid #ddd; text-align: center; width: 100px;">分数范围</th>
            <th style="padding: 10px; border: 1px solid #ddd; text-align: left;">说明</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td style="padding: 8px; border: 1px solid #ddd; text-align: center;">高活跃</td>
            <td style="padding: 8px; border: 1px solid #ddd; text-align: center;">80-100</td>
            <td style="padding: 8px; border: 1px solid #ddd; text-align: left;">非常活跃的用户，经常参与活动并提供反馈</td>
          </tr>
          <tr style="background-color: #f9f9f9;">
            <td style="padding: 8px; border: 1px solid #ddd; text-align: center;">中活跃</td>
            <td style="padding: 8px; border: 1px solid #ddd; text-align: center;">60-79</td>
            <td style="padding: 8px; border: 1px solid #ddd; text-align: left;">活跃度较高的用户，定期参与活动</td>
          </tr>
          <tr>
            <td style="padding: 8px; border: 1px solid #ddd; text-align: center;">低活跃</td>
            <td style="padding: 8px; border: 1px solid #ddd; text-align: center;">40-59</td>
            <td style="padding: 8px; border: 1px solid #ddd; text-align: left;">活跃度一般的用户，偶尔参与活动</td>
          </tr>
          <tr style="background-color: #f9f9f9;">
            <td style="padding: 8px; border: 1px solid #ddd; text-align: center;">不活跃</td>
            <td style="padding: 8px; border: 1px solid #ddd; text-align: center;">0-39</td>
            <td style="padding: 8px; border: 1px solid #ddd; text-align: left;">活跃度较低的用户，很少参与活动</td>
          </tr>
        </tbody>
      </table>
    </div>
  `
  element.appendChild(infoContainer)
  
  // 添加统计信息
  const statsContainer = document.createElement('div')
  statsContainer.innerHTML = `
    <div style="margin-bottom: 20px;">
      <h2 style="font-size: 18px; margin-bottom: 10px; border-bottom: 1px solid #eee; padding-bottom: 5px;">
        数据统计
      </h2>
      <table style="width: 100%; border-collapse: collapse; border: 1px solid #ddd; margin-top: 10px;">
        <tbody>
          <tr>
            <td style="padding: 8px; border: 1px solid #ddd; width: 40%; font-weight: bold; background-color: #f5f7fa;">用户总数</td>
            <td style="padding: 8px; border: 1px solid #ddd;">${userList.value.length}</td>
          </tr>
          <tr style="background-color: #f9f9f9;">
            <td style="padding: 8px; border: 1px solid #ddd; font-weight: bold; background-color: #f5f7fa;">平均活跃度</td>
            <td style="padding: 8px; border: 1px solid #ddd;">${calculateAverageScore().toFixed(2)}</td>
          </tr>
          <tr>
            <td style="padding: 8px; border: 1px solid #ddd; font-weight: bold; background-color: #f5f7fa;">最高活跃度</td>
            <td style="padding: 8px; border: 1px solid #ddd;">${userList.value.length > 0 ? userList.value[0].activityScore : 0}</td>
          </tr>
          <tr style="background-color: #f9f9f9;">
            <td style="padding: 8px; border: 1px solid #ddd; font-weight: bold; background-color: #f5f7fa;">筛选条件</td>
            <td style="padding: 8px; border: 1px solid #ddd;">Top ${topN.value}${searchKeyword.value ? ', 搜索: ' + searchKeyword.value : ''}</td>
          </tr>
        </tbody>
      </table>
    </div>
  `
  element.appendChild(statsContainer)
  
  // 添加页脚
  const footer = document.createElement('div')
  footer.innerHTML = `
    <hr style="border: 0; border-top: 1px solid #eee; margin: 20px 0;">
    <p style="text-align: center; color: #999; font-size: 12px;">© ${new Date().getFullYear()} 活动管理系统 - 用户排行榜</p>
  `
  element.appendChild(footer)
  
  // 将元素临时添加到文档中以供导出
  document.body.appendChild(element)
  element.style.position = 'absolute'
  element.style.left = '-9999px'
  
  // 使用html2canvas和jsPDF
  setTimeout(() => {
    html2canvas(element, {
      scale: 2,
      useCORS: true,
      logging: false,
      allowTaint: true,
      backgroundColor: '#FFFFFF'
    }).then(canvas => {
      // 删除临时元素
      document.body.removeChild(element)
      
      const imgData = canvas.toDataURL('image/jpeg', 1.0)
      const pdf = new jsPDF('p', 'mm', 'a4')
      const pdfWidth = pdf.internal.pageSize.getWidth()
      const pdfHeight = pdf.internal.pageSize.getHeight()
      const imgWidth = canvas.width
      const imgHeight = canvas.height
      const ratio = Math.min(pdfWidth / imgWidth, pdfHeight / imgHeight)
      const imgX = (pdfWidth - imgWidth * ratio) / 2
      const imgY = 0
      
      pdf.addImage(imgData, 'JPEG', imgX, imgY, imgWidth * ratio, imgHeight * ratio)
      pdf.save(`用户活跃度排行榜_${new Date().toISOString().split('T')[0]}.pdf`)
      
      exporting.value = false
      ElMessage.success('PDF导出成功')
    }).catch(error => {
      console.error('PDF导出失败:', error)
      document.body.removeChild(element)
      exporting.value = false
      ElMessage.error('PDF导出失败')
    })
  }, 1000) // 给足够时间让内容渲染完成
}

// 导出为Excel
const exportAsExcel = () => {
  if (exporting.value || loading.value) return
  if (userList.value.length === 0) {
    ElMessage.warning('没有可导出的数据')
    return
  }
  
  exporting.value = true
  ElMessage.info('正在生成Excel文件，请稍候...')
  
  try {
    // 准备数据
    const workbook = XLSX.utils.book_new()
    
    // 添加文档属性
    workbook.Props = {
      Title: "用户活跃度排行报表",
      Subject: "活动管理系统用户数据报表",
      Author: "活动管理系统",
      CreatedDate: new Date()
    }
    
    // 1. 创建报告信息工作表
    const reportInfoData = [
      ['用户活跃度排行报表', ''],
      ['导出时间', new Date().toLocaleString()],
      ['筛选条件', ''],
      ['排行显示', 'Top ' + topN.value],
      ['搜索关键词', searchKeyword.value || '无'],
      [''],
      ['统计摘要', ''],
      ['用户总数', userList.value.length, '系统中符合筛选条件的用户数量'],
      ['平均活跃度', calculateAverageScore().toFixed(2), '所有用户活跃度的平均值'],
      ['最高活跃度', userList.value.length > 0 ? userList.value[0].activityScore : 0, '排名第一的用户活跃度'],
      ['最低活跃度', userList.value.length > 0 ? userList.value[userList.value.length - 1].activityScore : 0, '排名最后的用户活跃度'],
      ['活跃度计算方式', '', '根据用户参与活动数、购票次数和反馈数量等综合计算得出'],
      [''],
      ['活跃度等级说明', ''],
      ['等级', '得分范围', '说明'],
      ['高活跃', '80-100', '非常活跃的用户，经常参与活动并提供反馈'],
      ['中活跃', '60-79', '活跃度较高的用户，定期参与活动'],
      ['低活跃', '40-59', '活跃度一般的用户，偶尔参与活动'],
      ['不活跃', '0-39', '活跃度较低的用户，很少参与活动']
    ]
    
    const reportInfoSheet = XLSX.utils.aoa_to_sheet(reportInfoData)
    
    // 设置列宽
    reportInfoSheet['!cols'] = [
      { wch: 20 }, // A列宽
      { wch: 20 }, // B列宽
      { wch: 40 }  // C列宽
    ]
    
    // 合并单元格
    reportInfoSheet['!merges'] = [
      { s: { r: 0, c: 0 }, e: { r: 0, c: 2 } }, // 合并标题行
      { s: { r: 2, c: 0 }, e: { r: 2, c: 2 } }, // 合并"筛选条件"行
      { s: { r: 6, c: 0 }, e: { r: 6, c: 2 } }, // 合并"统计摘要"行
      { s: { r: 13, c: 0 }, e: { r: 13, c: 2 } } // 合并"活跃度等级说明"行
    ]
    
    XLSX.utils.book_append_sheet(workbook, reportInfoSheet, '报告信息')
    
    // 2. 创建用户排行工作表
    const usersHeader = [
      '排名', '用户名', '用户ID', '活跃度', '活跃等级', '参与活动数', 
      '购票数量', '反馈数量', '最后活跃时间', '注册时间', '邮箱', '备注'
    ]
    const usersData = [usersHeader]
    
    userList.value.forEach((user, index) => {
      // 计算活跃等级
      let activityLevel = '不活跃'
      if (user.activityScore >= 80) activityLevel = '高活跃'
      else if (user.activityScore >= 60) activityLevel = '中活跃'
      else if (user.activityScore >= 40) activityLevel = '低活跃'
      
      usersData.push([
        index + 1,
        user.username,
        user.userId || '-',
        user.activityScore,
        activityLevel,
        user.eventCount,
        user.ticketCount || 0,
        user.surveyCount || 0,
        user.lastActiveTime || '-',
        user.registerTime || '-',
        user.email || '-',
        user.remarks || ''
      ])
    })
    
    const usersSheet = XLSX.utils.aoa_to_sheet(usersData)
    
    // 设置列宽
    usersSheet['!cols'] = [
      { wch: 8 },  // 排名
      { wch: 20 }, // 用户名
      { wch: 15 }, // 用户ID
      { wch: 10 }, // 活跃度
      { wch: 12 }, // 活跃等级
      { wch: 15 }, // 参与活动数
      { wch: 12 }, // 购票数量
      { wch: 12 }, // 反馈数量
      { wch: 20 }, // 最后活跃时间
      { wch: 20 }, // 注册时间
      { wch: 25 }, // 邮箱
      { wch: 30 }  // 备注
    ]
    
    XLSX.utils.book_append_sheet(workbook, usersSheet, '用户活跃度排行')
    
    // 3. 创建活跃度分布工作表
    const distributionData = [
      ['活跃度分布统计', ''],
      [''],
      ['活跃度范围', '用户数量', '占比'],
    ]
    
    // 计算不同活跃度区间的用户数量
    const highActive = userList.value.filter(u => u.activityScore >= 80).length
    const mediumActive = userList.value.filter(u => u.activityScore >= 60 && u.activityScore < 80).length
    const lowActive = userList.value.filter(u => u.activityScore >= 40 && u.activityScore < 60).length
    const inactive = userList.value.filter(u => u.activityScore < 40).length
    
    const total = userList.value.length || 1 // 避免除以0
    
    distributionData.push(
      ['高活跃 (80-100)', highActive, (highActive/total*100).toFixed(2) + '%'],
      ['中活跃 (60-79)', mediumActive, (mediumActive/total*100).toFixed(2) + '%'],
      ['低活跃 (40-59)', lowActive, (lowActive/total*100).toFixed(2) + '%'],
      ['不活跃 (0-39)', inactive, (inactive/total*100).toFixed(2) + '%'],
      ['总计', total, '100%']
    )
    
    const distributionSheet = XLSX.utils.aoa_to_sheet(distributionData)
    
    // 设置列宽
    distributionSheet['!cols'] = [
      { wch: 20 }, // A列宽
      { wch: 15 }, // B列宽
      { wch: 15 }  // C列宽
    ]
    
    // 合并单元格
    distributionSheet['!merges'] = [
      { s: { r: 0, c: 0 }, e: { r: 0, c: 2 } } // 合并标题行
    ]
    
    XLSX.utils.book_append_sheet(workbook, distributionSheet, '活跃度分布')
    
    // 4. 导出数据
    XLSX.writeFile(workbook, `用户活跃度排行_${new Date().toISOString().split('T')[0]}.xlsx`)
    
    exporting.value = false
    ElMessage.success('Excel导出成功')
  } catch (error) {
    console.error('Excel导出失败:', error)
    exporting.value = false
    ElMessage.error('Excel导出失败')
  }
}

// 计算平均活跃度
const calculateAverageScore = () => {
  if (userList.value.length === 0) return 0
  
  const sum = userList.value.reduce((acc, user) => acc + user.activityScore, 0)
  return sum / userList.value.length
}
</script>

<style scoped>
.user-ranking-container {
  animation: fadeIn 0.3s ease-out;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  background-color: var(--card-background);
  padding: 20px 24px;
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-base);
}

.page-header h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
}

.page-header h2::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 20px;
  background: linear-gradient(180deg, var(--primary-color), #4d7aff);
  margin-right: 12px;
  border-radius: 2px;
}

.header-actions {
  display: flex;
  align-items: center;
}

.ranking-content {
  margin-bottom: 20px;
}

.score-bar {
  display: flex;
  flex-direction: column;
}

.score-value {
  font-weight: bold;
  margin-bottom: 5px;
}

.user-detail-content {
  padding: 20px;
}

.user-detail-header {
  display: flex;
  align-items: center;
}

.user-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--primary-color);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
  margin-right: 20px;
}

.user-info h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
}

.user-info p {
  margin: 0 0 5px 0;
  color: #666;
  font-size: 14px;
}

.user-stats {
  padding: 10px 0;
}

.stat-item {
  text-align: center;
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 6px;
  margin-bottom: 10px;
}

.stat-label {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

.stat-value {
  font-size: 22px;
  font-weight: bold;
}

.stat-value.primary {
  color: var(--primary-color);
}

.stat-value.success {
  color: #67C23A;
}

.stat-value.warning {
  color: #E6A23C;
}

.stat-value.info {
  color: #909399;
}

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .header-actions {
    margin-top: 16px;
    width: 100%;
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .el-input, .el-select {
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 10px;
  }
  
  .el-dropdown {
    width: 100%;
    margin-bottom: 10px;
  }
}
</style> 